<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位居中</title>
		<style type="text/css">
			
			.parent{
				width: 567px;
				height: 594px;
				margin: auto;
				background: pink;
				position: relative;
			}
			.child{
				width: 140px;
				height: 120px;
				background: #f00;
				position: absolute;
				/*偏移50%,由于自身有宽高,需要减去宽高的一半*/
				left: 50%;
				margin-left: -70px;
				top: 50%;
				margin-top: -60px;
			}
			.child2{
				width: 150px;
				height: 150px;
				background: blue;
			}
			
		</style>
	</head>
	<body>
		<!--
			定位:	
				相对定位 relative(相对于它本身)
					1.不影响本身的特性
					2.不会使元素脱离文档流(文档流就是元素从上至下垂直排列显示的流)
					3.如果没有偏移量,对自身没有影响
					
				绝对定位 absolute(相对于离它最近的具有相对定位的父元素定位)
					1.脱离文档流
					2.如果祖先元素都没有相对定位,则相对于body定位
					3.没有自己的地盘
					
				固定定位
			
			相对定位配合绝对定位使用
		-->
		
		<div class="parent">
			<div class="child2"></div>
			<div class="child">div-child</div>
		</div>
	</body>
</html>
